<template>
  <div class="article-manager">
    <pages-header
      ref="pageHeader"
      :title="$route.params.id ? '查看申请人信息' : '查看申请人信息'"
      :backUrl="$routeProStr + '/apply/list'"
    ></pages-header>
    <el-card :bordered="false" shadow="never" class="mt16">
      <div class="apply_table">
        <table class="table">
          <tr>
            <td>姓 名</td>
            <td>{{ formValidate.name }}</td>
            <td>蓝天代号</td>
            <td>{{ formValidate.codename }}</td>
            <td>性 别</td>
            <td>{{ formValidate.gender }}</td>
            <td>民 族</td>
            <td>{{ formValidate.nationality }}</td>
            <td rowspan="6" style="width: 200px">
              <img :src="formValidate.photo" style="max-width: 180px" />
            </td>
          </tr>
          <tr>
            <td>出生日期</td>
            <td>{{ formValidate.birthday }}</td>
            <td>身 高</td>
            <td>{{ formValidate.height }}</td>
            <td>体 重</td>
            <td>{{ formValidate.weight }}</td>
            <td>血 型</td>
            <td>{{ formValidate.blood_type }}</td>
          </tr>
          <tr>
            <td>政治面貌</td>
            <td>{{ formValidate.political_landscape }}</td>
            <td>宗 教</td>
            <td>{{ formValidate.religion }}</td>
            <td>籍 贯</td>
            <td>{{ formValidate.birthplace }}</td>
            <td>户口所在地</td>
            <td>{{ formValidate.household }}</td>
          </tr>
          <tr>
            <td>过敏史</td>
            <td>{{ formValidate.allergy_history }}</td>
            <td>慢性病</td>
            <td>{{ formValidate.chronic_disease }}</td>
            <td>重大医疗史</td>
            <td colspan="3">{{ formValidate.medical_history }}</td>
          </tr>
          <tr>
            <td>身份证号码</td>
            <td colspan="3">{{ formValidate.card_id }}</td>
            <td>联系电话</td>
            <td colspan="3">{{ formValidate.mobile }}</td>
          </tr>
          <tr>
            <td>保险情况</td>
            <td colspan="3">{{ formValidate.insurance }}</td>
            <td>邮 箱</td>
            <td colspan="3">{{ formValidate.email }}</td>
          </tr>
          <tr v-for="(item, index) in formValidate.emergency_contact" :key="index + 'emergency'">
            <td>紧急联系人</td>
            <td>{{ item.name }}</td>
            <td>关 系</td>
            <td>{{ item.relation }}</td>
            <td>联系方式</td>
            <td colspan="4">{{ item.mobile }}</td>
          </tr>
          <tr>
            <td>现住地址</td>
            <td colspan="8">
              {{ formValidate.province }}
              {{ formValidate.city }}
              {{ formValidate.area }}
              {{ formValidate.address }}
            </td>
          </tr>
          <tr>
            <td colspan="9"><b>救援相关技能</b></td>
          </tr>
          <tr>
            <td colspan="2">驾驶证档案编号</td>
            <td colspan="2">{{ formValidate.driver_license.number }}</td>
            <td>准驾车型</td>
            <td>{{ formValidate.driver_license.place }}</td>
            <td>有效期</td>
            <td colspan="2">
              {{ formValidate.driver_license.start_time }}
              <span v-if="formValidate.driver_license">至</span>
              {{ formValidate.driver_license.end_time }}
            </td>
          </tr>
          <tr>
            <td colspan="2">紧急救护证书号</td>
            <td colspan="2">{{ formValidate.nurse_license.number }}</td>
            <td>签发地</td>
            <td>{{ formValidate.nurse_license.place }}</td>
            <td>有效期</td>
            <td colspan="2">
              {{ formValidate.nurse_license.start_time }}
              <span v-if="formValidate.nurse_license">至</span>
              {{ formValidate.nurse_license.end_time }}
            </td>
          </tr>
          <tr>
            <td colspan="2">水上救生证书号</td>
            <td colspan="2">{{ formValidate.water_rescue_license.number }}</td>
            <td>签发地</td>
            <td>{{ formValidate.water_rescue_license.place }}</td>
            <td>有效期</td>
            <td colspan="2">
              {{ formValidate.water_rescue_license.start_time }}
              <span v-if="formValidate.water_rescue_license">至</span>
              {{ formValidate.water_rescue_license.end_time }}
            </td>
          </tr>
          <tr>
            <td colspan="2">潜水员证书号</td>
            <td colspan="2">{{ formValidate.diving_license.number }}</td>
            <td>签发地</td>
            <td>{{ formValidate.diving_license.place }}</td>
            <td>有效期</td>
            <td colspan="2">
              {{ formValidate.diving_license.start_time }}
              <span v-if="formValidate.diving_license">至</span>
              {{ formValidate.diving_license.end_time }}
            </td>
          </tr>
          <tr>
            <td colspan="2">高山向导证书号</td>
            <td colspan="2">{{ formValidate.mountain_guide_license.number }}</td>
            <td>签发地</td>
            <td>{{ formValidate.mountain_guide_license.place }}</td>
            <td>有效期</td>
            <td colspan="2">
              {{ formValidate.mountain_guide_license.start_time }}
              <span v-if="formValidate.mountain_guide_license">至</span>
              {{ formValidate.mountain_guide_license.end_time }}
            </td>
          </tr>
          <tr>
            <td colspan="2">无线电操作证号</td>
            <td colspan="2">{{ formValidate.radio_operation_license.number }}</td>
            <td>签发地</td>
            <td>{{ formValidate.radio_operation_license.place }}</td>
            <td>有效期</td>
            <td colspan="2">
              {{ formValidate.radio_operation_license.start_time }}
              <span v-if="formValidate.radio_operation_license">至</span>
              {{ formValidate.radio_operation_license.end_time }}
            </td>
          </tr>
          <tr>
            <td colspan="9"><b>其它证书</b></td>
          </tr>
          <tr v-for="(item, index) in formValidate.other_license" :key="index + 'other'">
            <td>证书名称</td>
            <td>{{ item.name }}</td>
            <td>证书编号</td>
            <td>{{ item.number }}</td>
            <td>签发地</td>
            <td>{{ item.place }}</td>
            <td>有效期</td>
            <td colspan="2">
              {{ item.start_time }}
              至
              {{ item.end_time }}
            </td>
          </tr>
          <tr>
            <td colspan="2">是否有交通工具</td>
            <td>{{ formValidate.transport_status }}</td>
            <td colspan="4">是否自愿参加救援行动并承担安全风险</td>
            <td colspan="2">{{ formValidate.risk_status }}</td>
          </tr>
          <tr>
            <td colspan="3">可以参加的工作小组</td>
            <td colspan="6">{{ formValidate.working_team }}</td>
          </tr>
          <tr>
            <td colspan="9"><b>职业履历</b></td>
          </tr>
          <tr v-for="(item, index) in formValidate.career_history" :key="index + 'career'">
            <td>时间</td>
            <td colspan="2">
              {{ item.start_time }}
              至
              {{ item.end_time }}
            </td>
            <td>部门</td>
            <td>{{ item.department }}</td>
            <td>公司名称</td>
            <td>{{ item.company }}</td>
            <td>公司地址</td>
            <td>{{ item.address }}</td>
          </tr>
          <tr>
            <td colspan="9"><b>户外经历</b></td>
          </tr>
          <tr>
            <td colspan="9" style="height: 100px; text-align: left">{{ formValidate.outdoor }}</td>
          </tr>
          <tr>
            <td colspan="9"><b>个人性格特点</b></td>
          </tr>
          <tr>
            <td colspan="9" style="height: 100px; text-align: left">{{ formValidate.personality }}</td>
          </tr>
          <tr>
            <td colspan="4" style="width: 700px; height: 200px">
              <img :src="formValidate.front_card" style="max-height: 150px" />
            </td>
            <td colspan="5" style="width: 700px; height: 200px">
              <img :src="formValidate.back_card" style="max-height: 150px" />
            </td>
          </tr>
        </table>
      </div>
      <div class="apply_button" v-if="formValidate.status != 1">
        <el-popconfirm title="确定要通过么？" confirm-button-type="text" @confirm="setApplyStatus(1)">
          <el-button type="success" slot="reference" class="btn">通过</el-button>
        </el-popconfirm>
        <el-popconfirm title="确定约面试么？" confirm-button-type="text" @confirm="setApplyStatus(2)">
          <el-button type="primary" slot="reference" class="btn">约面试</el-button>
        </el-popconfirm>
        <el-popconfirm title="确定拒绝么？" confirm-button-type="text" @confirm="setApplyStatus(3)">
          <el-button type="danger" slot="reference" class="btn">拒绝</el-button>
        </el-popconfirm>
      </div>
    </el-card>
  </div>
</template>

<script>
import { setApply, getApplyDetail } from '@/api/apply';

export default {
  name: 'addApply',
  components: {  },
  data() {
    return {
      formValidate: {
        id: 0,
        name: '',
        codename: '',
        gender: '',
        nationality: '',
        birthday: '',
        height: '',
        weight: '',
        blood_type: '',
        political_landscape: '',
        religion: '',
        birthplace: '',
        household: '',
        allergy_history: '',
        medical_history: '',
        chronic_disease: '',
        card_id: '',
        mobile: '',
        insurance: '',
        email: '',
        emergency_contact: '',
        driver_license: '',
        nurse_license: '',
        water_rescue_license: '',
        diving_license: '',
        mountain_guide_license: '',
        radio_operation_license: '',
        other_license: '',
        transport_status: '',
        risk_status: '',
        working_team: '',
        career_history: '',
        outdoor: '',
        personality: '',
        front_card: '',
        back_card: '',
        photo: '',
        province: '',
        city: '',
        area: '',
        address: '',
        address_code: '',
        status: '',
        create_time: '',
        update_time: '',
      },
    };
  },
  computed: {},
  watch: {
    $route(to, from) {
      if (this.$route.params.id) {
        console.log(this.$route.params.id);
        this.getDetails();
      } else {
        this.formValidate = {
          id: 0,
          name: '',
          codename: '',
          gender: '',
          nationality: '',
          birthday: '',
          height: '',
          weight: '',
          blood_type: '',
          political_landscape: '',
          religion: '',
          birthplace: '',
          household: '',
          allergy_history: '',
          medical_history: '',
          chronic_disease: '',
          card_id: '',
          mobile: '',
          insurance: '',
          email: '',
          emergency_contact: '',
          driver_license: '',
          nurse_license: '',
          water_rescue_license: '',
          diving_license: '',
          mountain_guide_license: '',
          radio_operation_license: '',
          other_license: '',
          transport_status: '',
          risk_status: '',
          working_team: '',
          career_history: '',
          outdoor: '',
          personality: '',
          front_card: '',
          back_card: '',
          photo: '',
          province: '',
          city: '',
          area: '',
          address: '',
          address_code: '',
          status: '',
          create_time: '',
          update_time: '',
        };
      }
    },
  },
  methods: {
    // 详情
    getDetails() {
      getApplyDetail(this.$route.params.id)
        .then(async (res) => {
          let data = res.data;
          this.formValidate = {
            id: data.id,
            name: data.name,
            codename: data.codename,
            gender: data.gender,
            nationality: data.nationality,
            birthday: data.birthday,
            height: data.height,
            weight: data.weight,
            blood_type: data.blood_type,
            political_landscape: data.political_landscape,
            religion: data.religion,
            birthplace: data.birthplace,
            household: data.household,
            allergy_history: data.allergy_history,
            medical_history: data.medical_history,
            chronic_disease: data.chronic_disease,
            card_id: data.card_id,
            mobile: data.mobile,
            insurance: data.insurance,
            email: data.email,
            emergency_contact: data.emergency_contact,
            driver_license: data.driver_license,
            nurse_license: data.nurse_license,
            water_rescue_license: data.water_rescue_license,
            diving_license: data.diving_license,
            mountain_guide_license: data.mountain_guide_license,
            radio_operation_license: data.radio_operation_license,
            other_license: data.other_license,
            transport_status: data.transport_status,
            risk_status: data.risk_status,
            working_team: data.working_team,
            career_history: data.career_history,
            outdoor: data.outdoor,
            personality: data.personality,
            front_card: data.front_card,
            back_card: data.back_card,
            photo: data.photo,
            province: data.province,
            city: data.city,
            area: data.address,
            address: data.address,
            address_code: data.address_code,
            status: data.status,
            create_time: data.create_time,
            update_time: data.update_time,
          };
        })
        .catch((res) => {
          this.loading = false;
          this.$message.error(res.msg);
        });
    },
    setApplyStatus(type) {
      let data = {
        url: 'apply/status',
        method: 'post',
        datas: { id: this.formValidate.id, status: type },
      };

      setApply(data)
        .then(async (res) => {
          this.$message.success(res.msg);
          setTimeout(() => {
            this.$router.push({ path: this.$routeProStr + '/apply/list' });
          }, 500);
        })
        .catch((res) => {
          this.$message.error(res.msg);
        });
    },
  },
  mounted() {
    if (this.$route.params.id) {
      this.getDetails();
    }
  },
  created() {},
};
</script>
<style scoped lang="scss">
.grid_box {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto;
  grid-gap: 0;
}

.apply_table {
  padding: 0 10px;
  
  .table {
    width: 100%;
    border: 1px solid black;
    border-collapse: collapse;
    font-size: 16px;
    color: #000;

    tr {
      border: 1px solid black;
    }

    td {
      min-width: 100px;
      height: 40px;
      text-align: center;
      border: 1px solid black;
    }
  }
}

.apply_button {
  padding: 10px 0 0 0;
  display: flex;
  justify-content: center;
  width: 1000px;
  height: 50px;
  margin: 0 auto;

  .btn {
    margin: 0 20px;
  }
}

.content_width {
  width: 414px;
}
::v-deep .ivu-form-item-content {
  line-height: unset !important;
}
.picBox {
  display: inline-block;
  cursor: pointer;
}

.form .goodsTitle {
  border-bottom: 1px solid rgba(0, 0, 0, 0.09);
  margin-bottom: 25px;
}

.form .goodsTitle ~ .goodsTitle {
  margin-top: 20px;
}

.form .goodsTitle .title {
  border-bottom: 2px solid var(--prev-color-primary);
  padding: 0 8px 12px 5px;
  color: #000;
  font-size: 14px;
}

.form .goodsTitle .icons {
  font-size: 15px;
  margin-right: 8px;
  color: #999;
}

.form .add {
  font-size: 12px;
  color: var(--prev-color-primary);
  padding: 0 12px;
  cursor: pointer;
}

.form .radio {
  margin-right: 20px;
}

.form .submission {
  width: 10%;
  margin-left: 27px;
}

.form .upLoad {
  width: 58px;
  height: 58px;
  line-height: 58px;
  border: 1px dotted rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.02);
}

.form .iconfont {
  color: #898989;
}

.form .pictrue {
  width: 60px;
  height: 60px;
  border: 1px dotted rgba(0, 0, 0, 0.1);
  margin-right: 10px;
}

.form .pictrue img {
  width: 100%;
  height: 100%;
}

.Modals .address {
  width: 90%;
}

.Modals .address .iconfont {
  font-size: 20px;
}
.tip {
  margin-top: 10px;
  color: #bbb;
  font-size: 12px;
}
</style>
